<template>
    <div class="person">
        <!-- v-model 双向绑定，input的修改也会影响script中的变量值 -->
        姓: <input type="text" v-model="firstName">
        <br>
        名: <input type="text" v-model="lastName">
        <br>
        <!-- 给姓首字母大写可以在模板里完成，但不推荐 -->
        <!-- 全名：<span>{{ firstName.slice(0, 1).toUpperCase() + firstName.slice(1) }}-{{ lastName }}</span> -->
        <button @click="changeName">修改名字</button><br>

        全名：<span>{{ fullName }}</span><br>

        全名(函数调用)：<span>{{ computeFullName() }}</span><br>
        全名(函数调用)：<span>{{ computeFullName() }}</span><br>
    </div>
</template>


<script lang="ts" setup name="Person">
    
    import {ref, computed} from 'vue'
    // 定义数据
    let firstName = ref('zhang')
    let lastName = ref('san')

    // 可以使用computed方法计算，其生成的结果不可变，且多次引用时不会重复调用
    // 其生成的值为CmputedRefImpl类型，也是Ref类的
    // let fullName = computed(() => {
    //     return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    // })

    // 默认是get方法，添加set方法后，可以修改结果
    let fullName = computed({
        get() {
            return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
        },
        set(val) {
            const [str1, str2] = val.split('-')
            firstName.value = str1
            lastName.value = str2
        }
    })

    // 也可以直接调函数，但多次引用时会重复调用
    function computeFullName() {
        console.log("computeFullName")
        return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    }

    function changeName() {
        // 如果fullName的computed没有声明set方法，那么赋值会报错
        fullName.value = 'li-si'
    }

</script>


<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>